Text TV Pixelflut BornHack 2024

Pixelflut emulating teletext aka Tekst-TV featuring schedule, and user content news section

Idea

This years BornHack will feature an even cooler Pixelflut setup, which inspired me to make something for it. An important goal was to have something with a low barrier of entry to interact with it. My first idea involved a keyboard presented at the Pixelflut setup, allowing one to type messages to be displayed on screen. Then later i got the idea to make it Text TV themed, this works well with the nerdy culture, and allows me to add a schedule, and get user interaction through a "news" section.

Mock up

Inspiration

Renderer coding

Text rendering in C using pango & cairo

Based on a cairo pixel flut code sample from a fellow hacker, which i could expand to import and image, rather easily, and render text, which worked, but it was anti aliased, making it look horible in the small format.

Top is gimp mock up text, bottom is pango cairo rendered text

Turning off anti aliasing

This was annoying, because cairo_set_antialias(cr, CAIRO_ANTIALIAS_NONE); didn't work, it had to be done in pango context.

Change font rendering (non-antialiased) with pango - stackoverflow.com

An answer in this stack overflow question, mentions that: "In C you can turn off anti-aliasing when drawing with Pangocairo like this:"

cairo_font_options_t *options = cairo_font_options_create();
cairo_font_options_set_antialias(options, CAIRO_ANTIALIAS_NONE);
pango_cairo_context_set_font_options(context, options);
cairo_font_options_destroy(options);

Next problem then, is getting the context.

I found out how to do this in: pango examples cairoshape.c - gitlab.com

Using layout = pango_cairo_create_layout (cr); and pango_layout_get_context (layout);

This means i can now turn off, anti aliasing

Here's a code sample:

  cairo_surface_t *surface;
  cairo_t *cr;

  surface = cairo_image_surface_create_for_data(
    f->image, f->format,
    f->width, f->height, f->stride);
  cr = cairo_create(surface);

  //cairo_scale (cr, 2, 2);
  //cairo_set_antialias(cr, CAIRO_ANTIALIAS_NONE);

  int              w, h;
  cairo_surface_t *image;

  image = cairo_image_surface_create_from_png ("../base.png");
  w = cairo_image_surface_get_width (image);
  h = cairo_image_surface_get_height (image);
  //cairo_translate (cr, 0, 1080 - h);

  cairo_set_source_surface (cr, image, 0, 0);
  cairo_paint (cr);

  // Set up the Pango Cairo context
  PangoLayout *layout = pango_cairo_create_layout(cr);
  PangoFontDescription *font_desc = pango_font_description_from_string("Monospace 7");
  //pango_font_description_set_size(font_desc, 8 * PANGO_SCALE);
  pango_layout_set_font_description(layout, font_desc);
  pango_font_description_free(font_desc);

  // Turn off antialias
  PangoContext *pango_context = pango_layout_get_context (layout);
  cairo_set_antialias(cr, CAIRO_ANTIALIAS_NONE);
  cairo_font_options_t *options = cairo_font_options_create();
  cairo_font_options_set_antialias(options, CAIRO_ANTIALIAS_NONE);
  pango_cairo_context_set_font_options(pango_context, options);
  cairo_font_options_destroy(options);

  // Move
  cairo_translate (cr, 6, 115);

  // Set the text to display
  pango_layout_set_text(layout, "Hello World!", -1);

  // Render the layout
  cairo_set_source_rgb(cr, 1, 1, 1); // Set color to white
  pango_cairo_show_layout(cr, layout);

  // Clean up
  g_object_unref(layout);


  cairo_destroy (cr);
  cairo_surface_destroy(surface);

Which renderes non-anti-aliased text

Again, top is gimp mock up text, bottom is pango cairo rendered text

Comments

ID | Nickname | Visitor website URL| Means of contact | Created at

• 28 | 2024-11-20 13:56:37.879386+01:00
  cool blog